<template xmlns="http://www.w3.org/1999/html">
  地图类型：
  <el-select v-model="BMapSetting.type" @change="initMap" placeholder="请选择">
    <el-option value="BMAP_NORMAL_MAP" label="常规地图"></el-option>
    <el-option value="BMAP_SATELLITE_MAP" label="卫星图"></el-option>
  </el-select>
  <br/>
  <br/>
  <el-card class="box-card" style="z-index: 99;position: absolute;right: 2%;width: 360px">
    <div slot="header" class="clearfix">
      <div  style="height:30px;text-align: center;">
        <span style="font-size: 18px">{{dataMap.projectData.name}}</span>
        <span>
          <i class="el-icon" style="float: right; padding: 3px 0" @click="showTable">
          <svg aria-hidden="true" class="iconfont" style="">
            <use v-if="dataMap.showTable" xlink:href="#icon-caret-down"></use>
            <use v-else xlink:href="#icon-caret-up"></use>
          </svg>
        </i>
        </span>
      </div>
    </div>
    <div v-show="dataMap.showTable">
      <el-descriptions :column="1" :colon="false"  :font-family="'Arial'">

        <el-descriptions-item label="  项目位置：">
          {{dataMap.projectData.provinceName}}
          {{dataMap.projectData.cityName}}
          {{dataMap.projectData.creaName}}
        </el-descriptions-item>
        <el-descriptions-item label="项目负责人：">{{dataMap.projectData.projectHead}}</el-descriptions-item>
        <el-descriptions-item label="  项目成员：">{{dataMap.projectData.projectMember}}人</el-descriptions-item>
        <el-descriptions-item label="  项目状态：">
          <span v-if="dataMap.projectData.state == 0" size="small" type="success">施工中</span>
          <span v-if="dataMap.projectData.state == 1" size="small" type="success">待验收</span>
          <span v-if="dataMap.projectData.state == 2" size="small" type="success">验收通过</span>
        </el-descriptions-item>
        <el-descriptions-item label="  选择路线：">{{dataMap.projectData.name}}</el-descriptions-item>
        <el-descriptions-item label="    定点数：">{{dataMap.projectData.equipmentCount}}</el-descriptions-item>
      </el-descriptions>
      <div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="item in dataMap.equipmentData" style="padding: 10px">
            <div class="box-cards" style="width: 100%;height: 80px;">
              <div style="text-align: center;font-size: 20px;padding-top: 15px">
                <span>{{item.equipmentTypeNumber}}</span>
              </div>
              <div style="padding: 3px;margin: 0px auto" >
                <img src="item.url" style="height: 22px;width: 22px;margin-top: 3px">
                <div style="float: left;margin-top: 3px; width:60px;text-align: right">{{item.equipmentName}}</div>
              </div>
            </div>
          </el-col>
        </el-row>

      </div>
    </div>
  </el-card>
  <div style="height: 600px" ref="BMapRef"  id="bMap"></div>
</template>
<script setup lang="ts">
import {reactive, ref, onMounted, watch} from "vue";

import baseService from "@/service/baseService";
import {useRoute} from "vue-router";
const dataMap = reactive<object>({
  showTable:true,
  projectData:{id: '',
    name: '',
    provinceName: '',
    provinceId: '',
    cityName: '',
    cityId: '',
    creaName: '',
    creaId: '',
    projectHead: '',
    projectMember: '',
    createDate: '',
    state: '',
    notes: '',
    equipmentCount:0},
  lineSelect:[],
  equipmentData:[],
  line:"",
})
let markers = reactive([/*
  {
    icon:"http://api.map.baidu.com/images/blank.gif",
    iconW:40,
    iconH:40,
    pointLat:116.404,
    pointLng:39.925,
    content:'`<h4 style=\'margin:0 0 5px 0;\'>天安门</h4>\n                    <img style=\'float:right;margin:0 4px 22px\' id=\'imgDemo\' src=\'../img/tianAnMen.jpg\' width=\'139\' height=\'104\'/>\n                    <p style=\'margin:0;line-height:1.5;font-size:13px;text-indent:2em\'>\n                        天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...+\n                    </p>\n                    </div>',
    opts:{width : 200,     // 信息窗口宽度
      height: 100,     // 信息窗口高度
      title : "故宫博物院" , // 信息窗口标题
      message:"这里是故宫"}
  },{
    icon:"",
    iconW:40,
    iconH:40,
    pointLat:"116.404",
    pointLng:"39.935",
    content: "`<h4 style='margin:0 0 5px 0;'>天安门siii</h4>\n                    <img style='float:right;margin:0 4px 22px' id='imgDemo' src='../img/tianAnMen.jpg' width='139' height='104'/>                 <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>\n                        天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...+\n                    </p>\n                    </div>",
    opts:{width : 200,     // 信息窗口宽度
      height: 100,     // 信息窗口高度
      title : "故宫博物院12" , // 信息窗口标题
      message:"这里是故宫12"}
  }*/
  ]
)
let  BMapSetting=reactive({
  lat:"116.404",
  lng:"39.915",
  type:"BMAP_NORMAL_MAP",
})

const route = useRoute();
const routeParams = ref({});
routeParams.value = route.params;
dataMap.projectData =routeParams.value;

watch(() => route.params?route.params:undefined, (newId?:{}) => {
  console.log("开始监视路由变化")
  if(Object.keys(newId).length !== 0){
    routeParams.value = newId;
    dataMap.projectData =newId;
    initLineList();
  }
})
onMounted(()=>{
  initLineList();
  initMap()
})
const  initLineList = () => {
  //开始初始化 设备数量
  baseService.get("/sysproject/equipment/findEquipmentCount/" ,{"projectId":routeParams.value.id}).then((res) => {
    dataMap.projectData.equipmentCount = res.data
  });
  baseService.get("/sysproject/equipment/findEquipmentByLineList/" ,{"projectId":routeParams.value.id}).then((res) => {
    dataMap.equipmentData = res.data.equipmentCountData
    /* points.value.pointData = res.data.equipmentData*/
  });
}
const showTable = () => {
  if(dataMap.showTable){
    dataMap.showTable =false;
  }else{
    dataMap.showTable =true;
  }
}
//初始化地图
let BMapGL = window.BMap;
const initMap = () => {
  debugger
  let map = new BMapGL.Map("bMap");
  map.centerAndZoom(new BMapGL.Point(BMapSetting.lat, BMapSetting.lng), 13);
  map.enableScrollWheelZoom(true);
  if("BMAP_NORMAL_MAP"==BMapSetting.type){
    map.setMapType(BMAP_NORMAL_MAP);
  }else if("BMAP_SATELLITE_MAP"==BMapSetting.type){
    map.setMapType(BMAP_SATELLITE_MAP);
  }
  let polyline = [];
  if( markers.length>0){
    for (let i = 0; i < markers.length; i++) {
      let markerObj = markers[i];
      let point = new BMapGL.Point(markerObj.pointLat, markerObj.pointLng)
      let marker = new BMapGL.Marker(point);
      let infoWindow = new BMapGL.InfoWindow(markerObj.content,markerObj.opts);
      marker.addEventListener("click", ({LatLng}: any) => {
        map.openInfoWindow(infoWindow, point);
      })
      map.addOverlay(marker);
      polyline.push(point)
    }
    var polylines = new BMapGL.Polyline(polyline,{strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});
    // 将线添加到地图中
    map.addOverlay(polylines);
  }
}
</script>

.text {
font-size: 14px;
}

.item {
margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
display: table;
content: "";
}

.clearfix:after {
clear: both
}

.box-card {
width: 480px;
}
.box-cards{
border-radius: 2px;
background-color: white;
border: 1px solid #f1f1f1; /* 添加边框 */
box-shadow: 5px 5px 10px #E5EAF3FF; /* 添加阴影 */
font-size: 16px;
}
</style>
